<p class="upload_buttons">
  <button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed"
          [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
    上传课件
  </button>
</p>
<div class="upload_card" [ngbCollapse]="!isCollapsed">
  <div class="card">
    <div class="card-body">
      <div class="row">

        <div class="col-md-3">

          <h3>选择文件</h3>

          <div ng2FileDrop
               [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
               (fileOver)="fileOverBase($event)"
               [uploader]="uploader"
               class="my-drop-zone">
            拖拽文件到此处上传
          </div>

          <!--Multiple-->
          <!--<input type="file" ng2FileSelect [uploader]="uploader" multiple  /><br/>-->

          <!--Single-->
          <!--<input type="file" ng2FileSelect [uploader]="uploader" />-->
        </div>

        <div class="col-md-9" style="margin-bottom: 40px">

          <h3>上传文件列表</h3>
          <p>文件数量: {{ uploader.queue.length }}</p>

          <table class="table">
            <thead>
            <tr>
              <th width="30%">文件名</th>
              <th>大小</th>
              <th width="20%">进度</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let item of uploader.queue">
              <td><strong>{{ item.file.name }}</strong></td>
              <td *ngIf="uploader.options.isHTML5" nowrap>{{ item.file.size/1024/1024 | number:'.2' }} MB</td>
              <td *ngIf="uploader.options.isHTML5">
                <div class="progress" style="margin-bottom: 0;">
                  <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                </div>
              </td>
              <td class="text-center">
                <span *ngIf="item.isSuccess">上传成功</span>
                <span *ngIf="item.isCancel">已取消</span>
                <span *ngIf="item.isError">错误</span>
              </td>
              <td nowrap>
                <button style="margin-right: 5px;"
                        type="button"
                        class="btn btn-success btn-sm"
                        (click)="item.upload()"
                        [disabled]="item.isReady || item.isUploading || item.isSuccess">
                  上传
                </button>
                <button type="button"
                        class="btn btn-danger btn-sm"
                        (click)="item.remove()">
                  删除
                </button>
              </td>
            </tr>
            </tbody>
          </table>

          <div id="upload_bottom">
            <div>
              文件队伍进度:
              <div class="progress" id="progressBar">
                <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
              </div>
            </div>
            <button style="margin-right: 5px;"
                    class="btn btn-success btn-sm"
                    (click)="uploader.uploadAll()"
                    [disabled]="!uploader.getNotUploadedItems().length">
              上传所有文件
            </button>
            <button class="btn btn-danger btn-sm"
                    (click)="uploader.clearQueue()"
                    [disabled]="!uploader.queue.length">
              删除所有文件
            </button>
          </div>

        </div>

      </div>
    </div>
  </div>
</div>

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">

  <ngb-panel title="课件资源">
    <ng-template ngbPanelContent>

      <ol>
        <li *ngFor="let courseware of courseware_names">
          <a href="javascript:void(0)" (click)="download(courseware)"><b>{{ courseware }}</b></a>
          <hr>
        </li>
      </ol>
    </ng-template>
  </ngb-panel>

</ngb-accordion>
